<template>
  <div style="height: 100%; width: 100%">
    <div
      class="lineData"
      style="height: 100%; width: 100%"
      id="volumeAccumIncome"
    ></div>
  </div>
</template>
 <script>
export default {
  name: "lineDataNew",
  props: {
    completeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    name: {
      type: String,
      default() {
        return "";
      },
    },
  },
  watch: {
    completeData(val) {
      // var minData = Math.min.apply(null, val.yAxis)<=Math.min.apply(null, val.y1Axis)?Math.min.apply(null, val.yAxis):Math.min.apply(null, val.y1Axis);
      this.getPie(val);
    },
  },
  // mounted(){
  //   echarts.init(document.getElementById('volumeAccumIncome'))
  // },
  methods: {
    getPie(val) {
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".lineData"));
      let nameIndex = val.xAxis.indexOf(this.name);
      val.yAxis = val.yAxis.map((map, index) => {
        if (index == nameIndex) {
          return {
            value: map,
            itemStyle: {
              barBorderRadius:
                Number(map) > 0 ? [10, 10, 0, 0] : [0, 0, 10, 10],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#fe9580" }, 
                  { offset: 0.5, color: "#fe7c80" },
                  { offset: 0.75, color: "#fe6880" }, 
                  { offset: 1, color: "#fe5980" }, 
                ]),

            },
          };
        } else {
          return {
            value: map,
            itemStyle: {
              barBorderRadius:
                Number(map) > 0 ? [10, 10, 0, 0] : [0, 0, 10, 10],
            },
          };
        }
      });
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{b} <br /> {a0}: {c0}" + "%",
        },
        grid: {
          top: "40px",
          left: "40px",
          right: "30px",
          bottom: "30px",
        },
        legend: {
          data: ["年度完成率"],
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          axisLabel: {
            interval: 0,
            color: "#292f3b",
            // rotate: 40,
          },
          data: val.xAxis,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            // min:  minData*2,
            // max:20,
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
              },
            }, //去除网格线
            // max: 100,
            // // interval: 50,
            axisLabel: {
              formatter: "{value} %",
              show: true,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴
              show: true,
              lineStyle: {
                color: "#9399b6",
              },
            },
          },
        ],

        series: [
          {
            type: "bar",
            name: "年度完成率",
            smooth: true,
            data: val.yAxis,
            barWidth: 10,
            itemStyle: {
              normal: {
                // color: "#7f92f7",
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#49d6fe" }, //柱图渐变色
                  { offset: 0.5, color: "#47c9fe" },
                  { offset: 0.75, color: "#44b3fd" }, //柱图渐变色
                  { offset: 1, color: "#41a1fd" }, //柱图渐变色
                ]),
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}%",
                  rotate: 30
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

 <style>
</style>
